<template>
  <h2>setup + ts</h2>
  <button>-</button>
  <span>{{ count }}</span>
  <button @click="add(3)">+</button>

  <div>name: {{ state.name }}</div>

  <hr />
  <ul>
    <li v-for="item in oddList" :key="item">{{ item }}</li>
  </ul>

  <hr />

  <Child :num="5" @abc="fn" />
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, onMounted, provide } from "vue";
import Child from "./Child.vue";

interface StateType {
  name: string;
  age?: number;
  [propname: string]: any;
}

// 定义ref的数据的类型用泛型
const count = ref<number>(4);
// 定义reactive的变量需要我们自己定义interface接口
const state: StateType = reactive({
  name: "xiaohua",
  age: 20,
});
// void表示函数没有返回值
const add = (n: number): void => {
  count.value += n;
};

const list = ref<number[]>([1, 2, 3, 4, 5, 6, 7]);
// 计算属性的类型和ref一样要使用泛型
const oddList = computed<number[]>(() => {
  return list.value.filter((item) => item % 2);
});

// 侦听属性是不需要加类型的
watch(count, (val: number): void => {
  console.log("count变成了" + val);
});

// 生命周期也是不需要添加类型的
onMounted((): void => {
  console.log(123);
});

// 依赖注入也不要类型
provide("count", count);

const fn = (n: number) => {
  console.log("fn", n);
};
</script>
